<template>
	<om-page :title="pageTitle" class="om-font-size">
		<view class="margin-top-xs">
			<view class="save">
				<view style="flex: 1;">
					<a class="om-btn fr" @click="saveData">新建分组</a>
				</view>
			</view>
			<view class="page__bd" style="margin-top: 52px;">
				<uni-list>
					<uni-list-item :showSwitch="false" :showArrow="false" v-for="(item,index) in groupList" :key="item.id" :switchChecked="item.groupStatus" @switchChange="((e)=>{switchChange(e, item.id, index)})">
						<view>
							<view class="fl">{{item.groupName}}</view>
							<!-- <view class="fr">{{ item.groupStatus == true ? '显示' : '隐藏' }}</view> -->
						</view>
					</uni-list-item>
				</uni-list>
				<!-- <evan-checkbox-group @change="onGroupChange" v-model="groupCheck">
					<view class="evan-checkbox-show__group-item" v-for="item in groupList" :key="item.id">
						<evan-checkbox :label="item.id">{{item.groupName}}</evan-checkbox>
					</view>
				</evan-checkbox-group> -->
				<view class="add" @click="addGroup">+ 新建分组</view>
			</view>
		</view>
		<uni-popup  id="popup" ref="popup" :type="'center'">
			<view class="popup-cotent padding">
				<view class="margin popup-tip">
					新建分组
				</view>
				<view class="popup-item padding">
					<input type="text" class="txt" v-model="groupName" placeholder="请输入分组名称(＜10个字)" @input="handleInput" maxlength="9"/>
				</view>
				<view class="margin flex justify-end">
					<a class="cancel-btn om-btn" @click="save">确定</a>
					<a class="cancel-btn om-cancel-btn" @click="cancel">取消</a>
				</view>
			</view>
		</uni-popup>
	</om-page>
</template>

<script>
	// import evanCheckbox from '@/components/uniui/uni-checkbox/evan-checkbox/evan-checkbox';
	// import evanCheckboxGroup from '@/components/uniui/uni-checkbox/evan-checkbox-group/evan-checkbox-group';
	export default {
		components: {
			// evanCheckbox,
			// evanCheckboxGroup
		},
		data() {
			return {
				pageTitle: '分组添加',
				groupName: '',
				groupList: [],
				groupCheck: []
			};
		},
		methods: {
			save(){
				let _that = this
				_that.om.request('wxNewGroupMenu/renameGroup', {
					groupId: '',
					groupName: _that.groupName
				}, 'post').then(res => {
					if (res.succeed) {
						_that.getGroupList(_that.groupName)
						_that.$refs.popup.close()
					}else{
						_that.om.toast(res.msg);
					}
				});
			},
			cancel(){
				this.$refs.popup.close()
			},
			saveData(){
				this.$refs.popup.open()
				this.groupName = ''
				// let _that = this
				// let allGoupCheck = _that.groupList.map(e=>e.id)
				// let otherGoupCheck = _.difference(allGoupCheck, _that.groupCheck);
				// let jsonArray = [];
				// for(let i=0; i<otherGoupCheck.length; i++){
				// 	jsonArray.push({
				// 		id: otherGoupCheck[i],
				// 		groupStatus: false
				// 	})
				// }
				// for(let r=0; r<_that.groupCheck.length; r++){
				// 	jsonArray.push({
				// 		id: _that.groupCheck[r],
				// 		groupStatus: true
				// 	})
				// }

				// _that.om.request('wxNewGroupMenu/editGroupsStatus',{
				// 	json: JSON.stringify(jsonArray)
				// },'post').then(res => {
				// 	if (res.succeed) {
				// 		uni.navigateBack()
				// 	}else{
				// 		_that.om.toast(res.msg);
				// 	}
				// });
			},
			// onGroupChange(e) {
			// 	// console.log(e)
			// },
			addGroup(){
				this.$refs.popup.open()
				this.groupName = ''
			},
			getGroupList(groupName){
				let _that = this
				_that.om.request('wxNewGroupMenu/getAllGroupList').then(res => {
					if (res.succeed) {
						_that.groupList = res.value;
						
						for(let i=0; i<_that.groupList.length; i++){
							if(_that.groupList[i].groupStatus == true){
								_that.groupCheck.push(_that.groupList[i].id)
							}
							if(_that.groupList[i].groupName == groupName){
								_that.om.request('wxNewGroupMenu/editGroupStatus', {
									groupId: _that.groupList[i].id,
									groupStatus: true
								},'post').then(res => {
									if (res.succeed) {
										
									}else{
										_that.om.toast(res.msg);
									}
								});
							}
						}
					}
				});
			},
			switchChange(e, id, index){
				let _that = this
				_that.groupList[index].groupStatus = e.value
				if(_that.groupCheck.indexOf(id) == -1){
					_that.groupCheck.push(id)
				}else{
					_that.groupCheck.splice(_that.groupCheck.indexOf(id),1)
				}
			},
			handleInput(event){
				var val = event.target.value;
				val = val.replace(/#/g, '').substring(0, 10);
				this.groupName = val;
			},
		},
		onLoad() {
			this.getGroupList()
		},
	};
</script>

<style lang="scss" scoped>
	.save{
		position: fixed;
		top: 0;
		display: flex;
		z-index: 99;
		width: 100%;
		padding: 5px 3px;
		border-bottom: 1px solid #c8c7cc;
		background: #FFF;
	}
	.page__bd {
		.evan-checkbox-show__group-item{
			padding-left: 16px;
			border-bottom: 1px solid #d9d9d9;
			height: 48px;
			line-height: 48px;
		}
		.add{
			padding-left: 16px;
			border-bottom: 1px solid #d9d9d9;
			height: 48px;
			line-height: 48px;
			color: #0081ff;
		}
		.uni-list-item{
			padding-left: 0;
		}
		.uni-list-item__container{
			padding-left: 15px;
		}
	}
	.popup-cotent{
		width: 300px;
		background-color: white;
		border-radius: 10px;
	}
	.popup-item{
		height:50px;
		background-color: #FFFF;
		font-size: 16px;
		text-align: center;
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		justify-content: space-between;
	}
	.popup-item .txt{
		text-align: left;
		width: 100%;
	}
	.popup-tip{
		font-size: 16px;
		// color:#b0b0b0;
		color:#000;
	}
	.cancel-btn{
		margin: 15px auto 0;
	}
	// .fr{
	// 	float: right;
	// 	color: #999;
	// 	font-size: 14px;
	// 	margin-right: 10px;
	// 	margin-top: 2px;
	// }
</style>
